@import './chat.less';
.aboutPage {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  padding-top: 60px;


  .aboutPage-main-header_content_avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 2px #fff;
    position: absolute;
    left: 20px;
    top: 20px;
    margin: 0 auto 20px;
    cursor: pointer;
    text-align: center;
    line-height: 60px;

    a {
      color: #888;
      position: absolute;
      z-index: 999;
      left: 0;
      right: 0;
      margin: 0 auto;
    }

    &::before {
      position: absolute;
      content: "";
      border-radius: 50%;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: waterWave 4s ease-out 2s infinite;
      border: 1px solid #fff;
      box-shadow: 0 0 2px #fff;
    }

    &::after {
      position: absolute;
      content: "";
      border-radius: 50%;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      animation: waterWave 4s ease-out infinite;
      border: 1px solid #fff;
      box-shadow: 0 0 2px #fff;
    }
  }

  .aboutPage-h5 {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: hidden;
    background-color: #000;
    z-index: 9;
    display: flex;
    align-items: center;
    .aboutPage-h5-box {
      width: 360px;
      height: 90%;
      background-color: #f5f5f5;
      margin: 0 auto;
      position: relative;
      .aboutPage-h5-header {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        background-color: #fff;
        justify-content: space-between;
        padding: 0 10px;
        p{
          margin: 0;
        }
      }
      .aboutPage-h5-title {
        display: inline-block;
        margin: 10px auto;;
        padding: 3px 10px;
        position: relative;
        left: 50%;
        max-width: 85%;
        color: #fff;
        font-size: 12px;
        line-height: 1.4;
        background: rgba(0,0,0,.15);
        border-radius: 4px;
        transform: translateX(-50%);
      }
      .aboutPage-h5-footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        background-color: #fff;
        border: 1px solid #d0d0d1;
        background-color: #f5f5f5;
        display: flex;
        justify-content: space-around;
        padding: 5px 10px;
        i {
          font-size: 20px;
          margin: 0 5px;
        }
        input {
          outline: 0;
          margin: 0 5px;
          border: 1px solid #d0d0d1;
          flex-grow: 1;
        }
      }
    }
  }

  @keyframes waterWave {
    0% {
      transform: scale(1);
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      transform: scale(1.6);
      opacity: 0;
    }
  }
}